<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">技术：数据资源发现</div>
      <!-- <div class="shibie_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div> -->
    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>
    <!-- 注解 -->
    <div class="shibie_explain">
      注释#3:狭义数据源(DataSource)一般指：SUN制定的用于获取数据库连接的规范接口。本处数据源特指组织的数据资源。
    </div>
    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer1 = true"
        >
          网络流量分析
        </span>
        <el-drawer v-model="drawer1" title="网络流量分析" :with-header="false">
          <h5>基本概念</h5>
          <span style="margin-left: 30px"
            >网络流量分析技术是针对网络链路和设备，利用传感器、探针、抓包工具等采集、存储和分析数据，提取协议字段或网络报文内容。</span
          >
          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px"
            >网络流量分析技术主要实现方式是利用解码器对二进制网络流量数据和数据包进行还原，解析网络协议，结合上下文特征，分析数据内容。</span
          >
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer2 = true"
        >
          应用接口探测
        </span>
        <el-drawer
          class="drawer"
          v-model="drawer2"
          title="应用接口探测"
          :with-header="false"
        >
          <h5>基本概念</h5>
          <span style="margin-left: 30px"
            >应用接口探测是通过对应用程序接口、应用服务端口或应用数据同步，进行主动扫描，并根据预置权限(注释4)进行数据资源探测的技术。</span
          >
          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px"
            >应用接口探测技术通过端口扫描、网络爬虫、数据同步或消息队列等，探测域名、网页、IP
            段、端口、网络协议、应用程序，进一步根据预置协议发现数据资源。其中，端口扫描、网络爬虫、数据同步定义如下：</span
          >
          <br />
          <h6 style="margin-left: 30px; margin-top: 10px">(1) 端口扫描</h6>
          <span style="margin-left: 30px"
            >通过逐个对一段端口或指定端口进行扫描，主机向远端服务器某接口发生连接请求，并记录远端服务器应答，从而得知目标服务器的服务内容，搜集更多有价值信息。</span
          >
          <br />
          <h6 style="margin-left: 30px; margin-top: 10px">(2) 网络爬虫</h6>
          <span style="margin-left: 30px"
            >也称网络机器人，是指按照一定的规则，自动地抓取万维网信息的程序或者脚本。</span
          >
          <br />
          <h6 style="margin-left: 30px; margin-top: 10px">(3) 数据同步</h6>
          <span style="margin-left: 30px"
            >利用后台程序编码进行数据同步，或利用发布/订阅、SQL
            JOB、消息队列等进行数据同步。</span
          >
          <br />
          <div style="margin-top: 60px">
            注释#4:应用服务的低权限账号、口令或接口请求参数。</div
          >
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer3 = true"
        >
          业务锚点监测
        </span>
        <el-drawer v-model="drawer3" title="业务锚点监测" :with-header="false">
          <h5>基本概念</h5>
          <span style="margin-left: 30px"
            >业务锚点监测是指分析业务应用中数据流转，在业务功能或网络环节中，实施埋点或者部署切面，实现对业务数据监测的技术。</span
          >
          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px"
            >业务锚点监测技术的主要实现方式为利用在客户端埋点、服务端埋点；利用配置或代码记录所有业务操作和内容。</span
          >
        </el-drawer>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comments-section">

      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
          style="color: red; cursor: pointer"
          v-if="item.username === commentForm.username"
          @click="del(item.id)"
          >删除</span
        >
      </div>
      <div>
        <el-input
          class="comment-input"
          type="textarea"
          v-model="commentForm.content"
          placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
        >评论</el-button
      >

      <el-message
        v-if="errorMessage"
        :type="'error'"
        :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>
    
    <script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据资源发现",
          content: "",
          basis:
            "数据源发现是指对不同类型的数据资源发现的技术，是[战术：识别]的首要工作。数据资源发现非正式定义指：或通过网络流量分析并还原应用协议（被动的），或通过在业务应用嵌入监测锚点（主动的），或利用网络爬虫和扫描引擎探测并请求应用程序接口数据（主动的），以识别网络协议、应用接口、网页、文本、图片、视频、脚本等数据源。",
          main: "数据源发现系列技术主要包括网络流量分析、应用接口探测和业务锚点监测等(注释3)。",
        },
        // {
        //   title: "数据资产识别",
        //   basis:
        //     "数据资产，是指拥有数据权属（勘探权、使用权、所有权）、有价值、可计量、可读取的网络空间中的数据集。",
        //   main: "数据资产识别的主要实现方式为利用自动化技术手段对企业数据进行筛选与分析，找出符合数据资产定义的数据集。数字资产的识别技术主要包含关键字、正则表达式、基于文件属性识别、精准数据比对、指纹识别技术和支持向量网络等。",
        // },
        // {
        //   title: "数据资产处理（分析）",
        //   basis:
        //     "数据资产处理（分析）指在数据清洗的基础上，针对已采集和识别的重要数据资产和个人信息进行合规和安全处理。",
        //   main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        // },
        // {
        //   title: "数据分类分级",
        //   basis:
        //     "数据分类分级需要分两个步骤来开展。数据分类指根据组织数据的属性或特征，将其按照一定的原则和方法进行区分和分类，并建立起一定的分类体系和排列顺序，以便更好地管理和使用组织数据的过程。数据分级指按照一定的分级原则对分类后的数据进行定级，从而为数据的开放和共享安全策略提供支撑。",
        //   main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        // },
        // {
        //   title: "数据资产打标",
        //   basis:
        //     "数据资产打标指在生产过程中，依据国家相关规定或企业自身管理需求，在产品上通过各种技术进行文字、图片等标识，产品并不局限于实体。",
        //   main: "数据资产打标的主要实现方式包括：基于关键字的敏感数据打标：通过字段名称，注释信息；基于正则的敏感数据打标：通过样本数据；基于机器学习的敏感数据打标：整个表中所有字段名，样本数据，与其他表的相似度进行训练；对账号字段打标等。",
        // },
      ],
      comments: [],
      pageId: 2,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
            .delete(`/comments/${commentId}`)
            .then(() => {
              this.$message.success("评论删除成功");
              this.load(); // 重新加载评论列表
            })
            .catch((error) => {
              console.error("删除评论失败:", error);
              this.$message.error("删除评论失败");
            });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
        .get("/comments/" + this.pageId)
        .then((res) => {
          this.comments = res.data;
        })
        .catch((error) => {
          console.error("加载评论失败:", error);
        });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
        .post("/comments/" + this.pageId, {
          content: this.commentForm.content,
          username: this.commentForm.username,
          userId: this.commentForm.userId,
        })
        .then(() => {
          this.$message.success("评论成功");
          this.commentForm.content = "";
          this.load();
        })
        .catch((error) => {
          console.error("提交评论失败:", error);
          this.$message.error("提交评论失败");
        });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>
    
    <style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .shibie_explain{
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
    